import streamlit as st
import pymysql
import random
import datetime

MYSQL_HOST = "127.0.0.1"
MYSQL_PORT = 3306
MYSQL_USER = "root"
MYSQL_PASSWORD = "G5v3m5e5!"
MYSQL_DB = "random_tag_ygo"

REROLL = 1

from tags import tags
from utils import generate_verification_code

st.set_page_config(
    page_title="厄厄杯-线上娱乐赛",
    page_icon="👋",
)

hide_streamlit_style = """
    <style>
        .reportview-container {
            margin-top: -2em;
        }
        #MainMenu {visibility: hidden;}
        .stDeployButton {display:none;}
        footer {visibility: hidden;}
        #stDecoration {display:none;}
    </style>
            """
st.markdown(hide_streamlit_style, unsafe_allow_html=True)

# 连接MySQL数据库
conn = pymysql.connect(
    host=MYSQL_HOST,
    port=MYSQL_PORT,
    user=MYSQL_USER,
    password=MYSQL_PASSWORD,
    database=MYSQL_DB
)

# 创建游标
cursor = conn.cursor()

# 创建user_data表（如果不存在）
cursor.execute("""
    CREATE TABLE IF NOT EXISTS random_tags (
        id INT AUTO_INCREMENT PRIMARY KEY,
        username VARCHAR(255) UNIQUE,
        elements VARCHAR(255),
        verify_code VARCHAR(255),
        created_at DATE DEFAULT (CURRENT_DATE)
    )
""")

# Streamlit应用程序
st.markdown("<h1 style='text-align: center;'>🎉厄厄杯-线上娱乐赛🎉</h1>", unsafe_allow_html=True)

# 设定目标日期
target_date = datetime.datetime(2024, 2, 5,13,0)

now = datetime.datetime.now()
countdown = target_date - now

# 格式化显示倒计时
days = countdown.days
hours, remainder = divmod(countdown.seconds, 3600)
minutes, seconds = divmod(remainder, 60)

# 创建一个自定义的HTML和CSS样式
badge_html = """
<div style="
    border: 3px solid #B8860B; 
    border-radius: 15px; 
    text-align: center; 
    color: #B8860B; 
    font-size: 24px; 
    padding: 5px; 
    width: 200px;
    margin: auto;">
    测试阶段
</div>
"""

# 在Streamlit应用中显示它
st.markdown(badge_html, unsafe_allow_html=True)

# 使用Markdown和HTML创建简约的倒计时显示
st.markdown(
    f"<h4 style='text-align: center;'>⏱ 距离比赛还有 : {days} 天 {hours} 小时</h2>",
    unsafe_allow_html=True)

st.markdown("输入比赛昵称，点击报名按钮进行报名，报名后将获得一个**验证码**，并在查询页面进行查询。**请牢记该验证码！**")
# st.markdown('''
#                     <div style="color:red">
#                         报名已经截至！可以进行字段的试抽，但是结果不会被记录。
#                     </div>
#                     ''', unsafe_allow_html=True)

# 输入框和按钮
username = st.text_input("请输入比赛昵称:")


button1 = st.button("报名")

if button1:
    # 查询数据库
    if not username or username == "":
        st.error(f"用户名不能为空")
    else:
        cursor.execute("SELECT * FROM random_tags WHERE username=%s", (username,))
        existing_data = cursor.fetchone()
        if existing_data:
            st.error(f"选手 **{username}** 已报名，请根据验证码在 **查询** 页面查看！")
            # elements = existing_data[2]
            # st.success(f"选手 **{username}** 已报名\n抽选的字段是：**{elements}**")
        else:
            # 如果不存在数据，随机选择三个元素并存入数据库
            random_elements = random.sample(tags, 3)
            elements_str = ', '.join(random_elements)
            code = generate_verification_code()

            try:
                cursor.execute("INSERT INTO random_tags (username, elements,verify_code) VALUES (%s, %s,%s)", (username, elements_str,code))
                conn.commit()
                pass
            except Exception as e:
                st.error(str(e))

            st.success(f"选手 **{username}** 报名成功！\n验证码是: **{code}**，**请牢记该验证码用于后续查询和上传卡组！**")
            st.markdown(f"抽选的字段是：")
            # 创建两列布局
            pic1, pic2, pic3 = st.columns(3)
            # 在第一列显示图片
            with pic1:
                st.image(f"img/card/cut_{random_elements[0]}.jpg", use_column_width="auto", caption=random_elements[0])
            # 在第一列显示图片
            with pic2:
                st.image(f"img/card/cut_{random_elements[1]}.jpg", use_column_width="auto", caption=random_elements[1])
            # 在第一列显示图片
            with pic3:
                st.image(f"img/card/cut_{random_elements[2]}.jpg", use_column_width="auto", caption=random_elements[2])
            # st.success(f"选手 **{username}** 报名成功！\n抽取到的的字段是: **{elements_str}**")

# 关闭数据库连接
cursor.close()
conn.close()
